<template>
	<view>
		<view class="topbox">
			<view class="dqcj">
				当前剩余抽奖机会
			</view>
			<view class="num">
				<text>10</text>
				<text class="dw">次</text>
			</view>
			<view class="wdjp" @click="myprize">
				我的奖品
			</view>
			<view class="rule" @click="draw">
				抽奖规则
			</view>
		</view>
		<view class="kscj" @click="dianji">
			开始抽奖
		</view>
		<view class="bar">
			<u-notice-bar color="#F74033" bg-color="#FFF2E9" :volume-icon="false" mode="horizontal" :list="list">
			</u-notice-bar>
		</view>
		<view class="" style="margin-top: 30rpx;">
			<choujiang :arr="arr" @fz="fz()" @yd="yd()" @select="select"></choujiang>
		</view>
	</view>
</template>
<script>
	import choujiang from "../../components/choujiang/index.vue"
	export default {
		data() {
			return {
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				arr: [{
					id: 1,
					state: 0,//判断是正面还是背面0是正面
					bmimg: "../../static/组30.png",
					zmimg: '../../static/prize.png',
					x: "25rpx",
					y: "0",
					flag: false,
					wrap: false
				}, {
					id: 1,
					state: 0,//判断是正面还是背面
					bmimg: "../../static/组30.png",
					zmimg: '../../static/prize.png',
					x: "265rpx",
					y: "0",
					flag: false,
					wrap: false
				}, {
					id: 1,
					state: 0,//判断是正面还是背面
					bmimg: "../../static/组30.png",
					zmimg: '../../static/prize.png',
					x: "505rpx",
					y: "0",
					flag: false,
					wrap: false
				}, {
					id: 1,
					state: 0,//判断是正面还是背面
					bmimg: "../../static/组30.png",
					zmimg: '../../static/prize.png',
					x: "25rpx",
					y: "305rpx",
					flag: false,
					wrap: false
				}],
				listarr: [],
				satrflag:false
			}
		},
		methods: {
			// 翻转
			fz(index) {
				let that = this
				this.arr[index].flag = !this.arr[index].flag
				setTimeout(function() {
					if (that.arr[index].state == 0) {
						that.arr[index].state = 1
					} else {
						that.arr[index].state = 0
					}
				}, 500)
			},
			// 移动第一个参数是下表，第二个横坐标，第二个y坐标
			yd(index, x, y) {
				this.arr[index].x = x
				this.arr[index].y = y
			},
			// 选择
			select(e) {
				if(this.satrflag){
					let that = this
					this.fz(e.i)
					this.satrflag=false
					setTimeout(function() {
						that.arr.map((v, i) => {
							if (v.flag) {
								that.fz(i)
								v.wrap=true
							}
							return
						})
					}, 1000)
				}else{
					return
				}
				
			},
			// 数组重新排序
			randerArr(arr) {
				var newArr = arr.slice(0);
				var len = arr.length;
				var indexArr = [];
				for (var i = 0; i < len; i++) {
					if (indexArr[i]) {
						continue;
					}
					var random = parseInt(Math.random() * len);
					while (random === i) {
						random = parseInt(Math.random() * len);
					}
					indexArr[random] = indexArr[i] = true;
					var swap = newArr[i];
					newArr[i] = newArr[random];
					newArr[random] = swap;
				}
				return newArr
			},
			// 点击开始按钮
			dianji() {
				let that = this
				// 先清空排序的数组
				this.listarr = []
				for (let i = 0; i < this.arr.length; i++) {
					this.arr[i].state = 0
					this.arr[i].wrap=false
					this.fz(i)
					this.listarr.push({
						x: this.arr[i].x,
						y: this.arr[i].y
					})
				}
				this.listarr = this.randerArr(this.listarr)
				setTimeout(function() {
					that.arr.forEach(function(item, index) {
						that.yd(index, that.listarr[index].x, that.listarr[index].y)
					})
				}, 1000)
				this.satrflag=true
			},
			myprize(){
				this.jumpLink({link:"/pagesB/myprize/index"})
			},
			// 抽奖规则
			draw(){
				this.jumpLink({link:"/pagesB/draw_rules/index"})
			}
		},
		components: {
			choujiang
		}
	}
</script>
<style scoped lang="scss">
	.topbox {
		width: 100%;
		height: 332rpx;
		background-image: url(../../static/组17_23.png);
		background-size: 100% 332rpx;
		padding-top: 42rpx;
		box-sizing: border-box;
		position: relative;

		.dqcj {
			text-align: center;
			font-family: MicrosoftYaHei-Bold;
			font-size: 30rpx;
			font-weight: 700;
			color: #fff;
		}

		.num {
			text-align: center;
			color: #FFF;
			font-weight: 700;
			margin-top: 60rpx;

			text {
				font-family: MicrosoftYaHei-Bold;
				font-size: 60rpx;
			}

			.dw {
				font-size: 30rpx;
			}
		}

		.wdjp {
			width: 180rpx;
			height: 56rpx;
			background-image: linear-gradient(0deg,
					#ff3b62 0%,
					#fd86a4 100%),
				linear-gradient(#ffffff,
					#ffffff);
			background-blend-mode: normal,
				normal;
			border-radius: 10rpx;
			line-height: 56rpx;
			text-align: center;
			font-family: MicrosoftYaHei;
			font-size: 30rpx;
			color: #fff;
			left: 292rpx;
			bottom: 15rpx;
			position: absolute;
		}

		.rule {
			position: absolute;
			width: 120rpx;
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			color: #fff;
			border-radius: 18rpx;
			border: solid 1rpx #ffffff;
			right: 55rpx;
			top: 44rpx;
			font-family: MicrosoftYaHei;
			font-size: 22rpx;

		}
	}


	.kscj {
		width: 274rpx;
		height: 87rpx;
		background-image: linear-gradient(0deg,
				#da3c0c 0%,
				#eb5f47 60%,
				#f5766d 100%),
			linear-gradient(#ffffff,
				#ffffff);
		background-blend-mode: normal,
			normal;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(225, 75, 37, 0.68);
		border-radius: 44rpx;
		line-height: 87rpx;
		text-align: center;
		color: #fff;
		font-family: MicrosoftYaHei;
		font-size: 36rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.bar {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}
</style>
